import React, {Component, PropTypes} from 'react'

export default class NavigationBar extends Component {
    render() {
        return (
            <div className="navigation">
                <button className="navigation" onClick={ e => this.onClick(e)} value="Games">Games</button>
                <button className="navigation" style={{left: "300px"}} onClick={ e => this.onClick(e)} value="Players">Players</button>
                <button className="navigation" style={{left: "500px"}} onClick={ e => this.onClick(e)} value="Teams">Teams</button>
                <div className="navLine" style={{left: this.props.xPoint, width: this.props.width}}></div>
            </div>
        )
    }

    onClick(e) {
        var text = e.target.value;
        this.props.onClickBtn(text);
    }

}


NavigationBar.propTypes = {
    onClickBtn: PropTypes.func.isRequired
};
